<template>
    <view>
        <!-- pages/index/address/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarBg="navbarBg" :navbarData="navbarData"></navber>

        <!-- 地址选择 -->
        <view class="address">
            <view class="address-select">
                <view class="address-select-then" @tap="switchCity">
                    <view class="select-select-then-city">{{ addressInfo.city }}</view>
                    <view class="select-select-then-img">
                        <image :src="imgUrl + '/imgs/select_address.png'"></image>
                    </view>
                </view>
                <view class="address-select-input">
                    <view class="address-select-input-input">
                        <input placeholder="请输入您的地址" @input="inputAddress" @confirm="confirmAddress" />
                    </view>
                    <view class="select-select-input-img" @tap="confirmAddress">
                        <image :src="imgUrl + '/imgs/search.png'"></image>
                    </view>
                </view>
            </view>

            <!-- 列表 -->
            <view class="address-list">
                <view class="address-list-item" @tap="selectAddress($event, { index })" :data-index="index" v-for="(item, index) in addressList" :key="index">
                    <view :class="'address-list-item-circle ' + (item.selected ? 'address-list-item-circle-action' : '')"></view>

                    <view class="address-list-item-info">
                        <view :class="'address-list-item-info-street_number ' + (item.selected ? 'address-list-item-info-action' : '')">{{ item.title }}</view>
                        <view class="address-list-item-info-street">{{ item.address }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/index/address/index.js
const app = getApp();

const Config = require('../../../config/index.js');

const MapSdk = require('../../../utils/libs/wx-qqmap-jssdk.js');

const Map = new MapSdk({
    key: Config.qqmapKey
});
export default {
    components: {
        navber
    },
    data() {
        return {
            navbarBg: 'linear-gradient(180deg, #ffeabf 0%, #ffdd9c 100%);',
            navbarData: {
                title: '切换地址' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            addressInfo: {
                nation: '',
                //国
                province: '',
                //省
                city: '贵阳市',
                //市
                district: '',
                //区
                street: '',
                //街道
                street_number: '' //门牌
            },
            //定位地址
            keyword: '',
            addressList: [] //列表
        };
    },
    onShow() {
        // app.globalData.addressInfo.city="贵阳市"
        this.setData({
            addressInfo: app.globalData.addressInfo
        });
    },
    methods: {
        switchCity(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //切换城市
            uni.navigateTo({
                url: '/pages/index/address/city/index'
            });
        },

        inputAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //地址输入
            this.setData({
                keyword: e.detail.value
            });
        },

        confirmAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //确认地址
            var _this = this;

            if (_this.keyword == '') {
                uni.showToast({
                    title: '请输入关键字',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } //调用关键词提示接口

            Map.getSuggestion({
                //获取输入框值并设置keyword参数
                keyword: _this.keyword,
                //用户输入的关键词，可设置固定值,如keyword:'KFC'
                region: _this.addressInfo.city,
                //设置城市名，限制关键词所示的地域范围，非必填参数
                success: function (res) {
                    //搜索成功后的回调
                    console.log(res);

                    _this.setData({
                        addressList: res.data
                    });
                },
                fail: function (error) {
                    // console.error(error);
                }
            });
        },

        selectAddress(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //选择地址
            var json = this.addressList;
            var addressInfo = this.addressInfo;

            for (var i = 0; i < json.length; i++) {
                json[i].selected = false; //默认不选择
            }

            json[e.currentTarget.dataset.index].selected = true;
            addressInfo.street = json[e.currentTarget.dataset.index].title;
            addressInfo.street_number = json[e.currentTarget.dataset.index].address;
            this.setData({
                addressList: this.addressList,
                addressInfo: addressInfo
            });
            app.globalData.addressInfo = addressInfo; //设置全局
            // console.log(this.data.addressInfo)
        }
    }
};
</script>
<style>
@import './index.css';
</style>
